// import React from 'react'
import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { guanzhuAPI, loadxisheng } from "../services/home";
import { Button, NavBar, Toast } from "antd-mobile";
import { loaduserAPI } from "../services/user";

function Xsxiangqing() {
  const Params = useParams();
  const nav = useNavigate();
  const back = () => nav(-1);
  // Toast.show({
  //   content: "点击了返回区域",
  //   duration: 1000,
  // });
  console.log(Params);
  const [list, setList] = useState([]);
  useEffect(() => {
    loadxisheng(Params.id).then((res) => {
      // console.log(res.data);
      setList(res.data);
    });
  }, [Params]);
  const [user, setUser] = useState({});
  const loaduser = async () => {
    const res = await loaduserAPI();
    console.log(res);
    setUser(res.data);
  };
  useEffect(() => {
    loaduser();
  }, []);
  const str = `<div>
  <p>${list.content}</p>
  </div>`;
  return (
    <div>
      <NavBar back="返回" onBack={back}></NavBar>
      <div dangerouslySetInnerHTML={{ __html: str }}></div>
      {list.success ? (
        <Button
          onClick={async () => {
            const gz = await guanzhuAPI(user.id, list.id);
            console.log(gz);
            if (gz.success) {
              Toast.show("恭喜你,关注成功");
            } else {
              Toast.show("你的网络出问题了哦");
            }
          }}
        >
          关注这个医生
        </Button>
      ) : (
        <Button
          onClick={async () => {
            const gz = await guanzhuAPI(user.id, list.id);
            console.log(gz);
            if (gz.success) {
              Toast.show("关注已取消");
            } else {
              Toast.show("你的网络出问题了哦");
            }
          }}
        >
          已关注
        </Button>
      )}
    </div>
  );
}

export default Xsxiangqing;
